<template>
	<view>
		<view class="steps pd-20" v-if="orderStatus != 4">
			<u-steps :current="orderStatus" dot>
				<u-steps-item title="待付款"></u-steps-item>
				<u-steps-item title="待发货"></u-steps-item>
				<u-steps-item title="待收货"></u-steps-item>
				<u-steps-item title="已完成"></u-steps-item>
			</u-steps>
		</view>
		<view class="cancel flex-row row-middle pd-20" v-else>
			<u-icon name="close-circle" size="48" color="#dc0404"></u-icon>
			<text>已取消</text>
		</view>
		<view class="address pd-20 mn-t-15">
			<view>
				<text class="pd-r-20">{{orderDetail.orderPerson}}</text>
				<text>{{orderDetail.orderPhone}}</text>
			</view>
			<view>
				<text class="text-grey">{{orderDetail.orderAddress}}</text>
			</view>
		</view>
		<view class="goods pd-20 mn-t-15">
			<view class="flex-row row-between-wrapper" v-for="(item, index) in orderDetail.orderDetailDList"
				:key="index">
				<view class="pic">
					<image :src="item.productImage"></image>
				</view>
				<view class="text-detail">
					<view class="flex-row row-between-wrapper">
						<view class="pname line1">{{item.productName}}</view>
						<view class="num">×{{item.detailNumber}}</view>
					</view>
					<view class="attr line1">{{item.specifications}}</view>
					<view class="price">￥{{item.orderPrice}}</view>
				</view>
			</view>
		</view>
		<view class="order pd-20 mn-t-15">
			<view class="flex-row row-between">
				<view>订单编号：</view>
				<view class="conter">{{orderDetail.orderId}}</view>
			</view>
			<view class="flex-row row-between">
				<view>下单时间：</view>
				<view class="conter">{{$util.dateFormat(orderDetail.createTime)}}</view>
			</view>
			<!-- <view class="flex-row row-between">
				<view>支付状态：</view>
				<view></view>
			</view>
			<view class="flex-row row-between">
				<view>支付方式：</view>
				<view></view>
			</view> -->
		</view>

		<view class="totalPrice pd-20 mn-t-15">
			<view class="flex-row row-between pd-20">
				<view>商品总价：</view>
				<view class="conter">￥{{orderDetail.totalPrice}}</view>
			</view>
			<view class="flex-row row-right pd-20" v-if="orderStatus == 3">
				<view class="btn">取消订单</view>
			</view>
		</view>
		<view class="totalPrice pd-20 mn-t-15" v-if="userType == 'SALE' && orderStatus == 2">
			<view class="flex-row row-right pd-20">
				<view class="btn" style="color: white;background-color: #06A972;" @click="scanOutbound">扫码出库</view>
				<view class="btn" @click="confirmOutbound"
					style="margin-left: 10px;color: white;background-color: #06A972;">确认出库</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		orderCancel,
		getOrderDetail
	} from '@/api/order'
	export default {
		data() {
			return {
				orderId: 0,
				orderDetail: {},
			}

		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
			orderStatus() {
				let orderStatus = 0;
				switch (this.orderDetail.orderStatus) {
					case 'IN_PAY':
						orderStatus = 0;
						break;
					case 'WAIT_SEND':
						orderStatus = 1;
						break;
					case 'WAIT_RECEIVE':
						orderStatus = 2;
						break;
					case 'FINISH':
						orderStatus = 3;
						break;
					case 'CANCEL':
						orderStatus = 4;
						break;
					default:
						orderStatus = 0;
						break;
				}
				return orderStatus;
			}
		},
		onLoad(option) {
			let that = this;
			that.orderId = option.orderId || 0;
			if (!that.orderId) return that.$util.Tips({
				title: '数据无效'
			}, {
				tab: 3
			});
			that.getOrderDetail();
		},
		onShow() {

		},
		methods: {
			/**
			 * 扫码出库
			 */
			scanOutbound() {
				let that = this;
				// 调用扫码接口或逻辑
				console.log("扫码出库功能尚未实现");
				// 示例：弹出提示
				that.$util.Tips({
					title: "扫码出库功能尚未实现"
				});
			},

			/**
			 * 确认出库
			 */
			confirmOutbound() {
				let that = this;
				// 调用确认出库接口或逻辑
				console.log("确认出库功能尚未实现");
				// 示例：弹出提示
				that.$util.Tips({
					title: "确认出库功能尚未实现"
				});
			},
			getOrderDetail() {
				let that = this;
				getOrderDetail({
					orderId: that.orderId,
					userInfoId: that.uid
				}).then(res => {
					that.orderDetail = res.value;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			/**
			 * 取消订单
			 */
			cancelOrder() {
				let that = this;
				orderCancel({
					userInfoId: that.uid,
					orderId: that.orderId
				}).then(res => {
					that.$util.Tips({
						title: '取消订单成功'
					}, {
						tab: 3
					});
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				});
			},

		},
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.steps,
	.cancel,
	.address,
	.goods {
		background: #fff;
	}

	.goods .pic {
		width: 130rpx;
		height: 130rpx;
	}

	.goods .pic image {
		width: 100%;
		height: 100%;
	}

	.goods .text-detail {
		width: calc(100% - 150rpx);
		padding-left: 20rpx;
		position: relative;
	}

	.goods .text-detail .pname {
		font-size: 28rpx;
		color: #282828;
		width: 432rpx;
	}

	.goods .text-detail .num {
		font-size: 26rpx;
		color: #868686;
	}

	.goods .text-detail .attr {
		font-size: 20rpx;
		color: #868686;
		margin-top: 6rpx;
	}

	.goods .text-detail .price {
		font-size: 26rpx;
		color: #FD502F;
		margin-top: 16rpx;
	}

	.order {
		background: #fff;
	}

	.order .conter,
	.totalPrice .conter {
		color: #868686;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		text-align: right;
	}

	.totalPrice {
		background: #fff;
	}

	.btn {
		width: auto;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 25px;
		font-size: 13px;
		padding: 0 3%;
		color: #666;
		border: 1px solid #ccc;
	}

	.pd-20 {
		padding: 20rpx;
	}

	.pd-r-20 {
		padding-right: 20rpx;
	}

	.mn-t-15 {
		margin-top: 15rpx;
	}

	.u-text__value {
		font-size: 24rpx !important;
	}

	.text-grey {
		color: #c3c3c3;
	}
</style>